import thin_render from "./thin_render.mjs";
import viewmode from "./viewmode.mjs";
import datarover from "./datarover.mjs";
import render_content from "./render_content.mjs";
import { thin } from "../thin3.mjs";

export default function field_template(container, template) {
  let field;
  switch (template?.colspan) {
    case 2:
      field = document.createElement("F2");
      break;
    case 3:
      field = document.createElement("F3");
      break;
    case 0:
      field = document.createElement("F0");
      break;
    default:
      field = document.createElement("F1");
      break;
  }
  container.appendChild(field);
  if (template.colspan !== 0) {
    let label = document.createElement("label");
    field.appendChild(label);
    thin_render(label, template.title || template.field);
  }
  let vm = viewmode(field);
  if ((!template.readonly && vm === "edit") || vm === "insert") {
    if (template.defaultvalue !== undefined) {
      if (datarover(field, template.field) === undefined) {
        datarover(field, template.field, template.defaultvalue);
      }
    }

    switch (template.type) {
      case "textarea":
        thin_render(field, {
          textarea: template.field,
          bind: template.field,
          // value: template.value,
          a: template.a,
          event: template.event,
        });
        break;
      case "checkbox":
        thin_render(field, {
          input: template.field,
          bind: template.field,
          // value: template.value,
          a: template.a,
          type: "checkbox",
          event: template.event,
        });
        break;
      case "select":
        thin_render(field, {
          select: template.field,
          a: template.a,
          bind: template.field,
          ajax: template.ajax,
          options: template.options,
          // value: template.value,
          event: template.event,
          // datapath:template.datapath,
        });
        break;
      default:
        thin_render(field, {
          input: template.field,
          id: template.field,
          value: template.value,
          a: { ...template.a, ...{ type: template.type } },
          bind: template.field,
          ajax: template.ajax,
          event: template.event,
        });
        break;
    }
  } else {
    if (template.ajax && template.ajax.param) {
      let query = {};
      query[template.ajax.param] = datarover(field, template.field);
      // console.log(template.ajax.query);
      // console.log(query);
      thin
        .ajax({
          url: template.ajax.url,
          data: { ...template.ajax.query, ...query },
        })
        .done((data) => {
          let rows = datarover(data, template.ajax.datapath);
          console.log({ data, rows });
          if (rows.length === 1) {
            thin_render(field, render_content(rows[0], template.ajax.text));
          } else {
            thin_render(
              field,
              template.text || "[[".concat(template.field, "]]")
            );
          }
        });
    } else {
      thin_render(field, template.text || "[[".concat(template.field, "]]"));
    }
  }
}
